前の手順では、C1ListBox コントロールをアプリケーションに追加しました。この手順では、フォトストリームから画像を表示するコードを追加します。
プログラムでコントロールにデータを追加するには、次の手順に従います。
- ［ページ］を選択して［プロパティ］ウィンドウに移動し、稲妻の［イベント］ボタンをクリックしてイベントを表示します。次に、下にスクロールして、Loaded イベントの横にある領域をダブルクリックします。
これで、コードエディタが開き、Page_Loaded イベントが追加されます。 - 次の imports 文をページの先頭に追加します。
Visual Basic コードの書き方
Visual Basic コードのコピーImports C1.Xaml
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Net
Imports System.Xml.Linq
Imports Windows.UI.Popups
Imports Windows.UI.Xaml
Imports Windows.UI.Xaml.ControlsC# コードの書き方
C# コードのコピーusing C1.Xaml;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Xml.Linq;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls; -
Page_Loaded イベントハンドラ内に次のコードを追加します。
Visual Basic コードの書き方
Visual Basic コードのコピーLoadPhotos() C# コードの書き方
C# コードのコピーLoadPhotos(); -
MainPage クラス内の Page_Loaded イベントの下に次のコードを追加します。
Visual Basic コードの書き方
Visual Basic コードのコピーPrivate Async Function LoadPhotos() As Task
Dim flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne"
Dim AtomNS = "http://www.w3.org/2005/Atom"
Dim photos = New List(Of Photo)()
Dim client = WebRequest.CreateHttp(New Uri(flickrUrl))
Dim response = Await client.GetResponseAsync()
Try
'#Region "** parse data"
Dim doc = XDocument.Load(response.GetResponseStream())
For Each entry As XElement In doc.Descendants(XName.[Get]("entry", AtomNS))
Dim title = entry.Element(XName.[Get]("title", AtomNS)).Value
Dim enclosure = entry.Elements(XName.[Get]("link", AtomNS)).Where(Function(elem) elem.Attribute("rel").Value = "enclosure").FirstOrDefault()
Dim contentUri = enclosure.Attribute("href").Value
photos.Add(New Photo() With { _
.Title = title, _
.Content = contentUri, _
.Thumbnail = contentUri.Replace("_b", "_m") _
})
Next
'#End Region
listBox.ItemsSource = photos
loading.Visibility = Visibility.Collapsed
listBox.Zoom = C1ZoomUnit.Fill
listBox.Visibility = Visibility.Visible
Catch
Dim dialog = New MessageDialog("There was an error when attempting to download data from Flickr.")
async dialog.ShowAsync()
End Try
End Function
C# コードの書き方
C# コードのコピーprivate async void LoadPhotos()
{
var flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne";
var AtomNS = "http://www.w3.org/2005/Atom";
var photos = new List<Photo>();
var client = WebRequest.CreateHttp(new Uri(flickrUrl));
var response = await client.GetResponseAsync();
try
{
#region ** parse data
var doc = XDocument.Load(response.GetResponseStream());
foreach (var entry in doc.Descendants(XName.Get("entry", AtomNS)))
{
var title = entry.Element(XName.Get("title", AtomNS)).Value;
var enclosure = entry.Elements(XName.Get("link", AtomNS)).Where(elem => elem.Attribute("rel").Value == "enclosure").FirstOrDefault();
var contentUri = enclosure.Attribute("href").Value;
photos.Add(new Photo() { Title = title, Content = contentUri, Thumbnail = contentUri.Replace("_b","_m") });
}
#endregion
listBox.ItemsSource = photos;
loading.Visibility = Visibility.Collapsed;
listBox.Zoom = C1ZoomUnit.Fill;
listBox.Visibility = Visibility.Visible;
}
catch
{
var dialog = new MessageDialog("There was an error when attempting to download data from Flickr.");
async dialog.ShowAsync();
}
}
- 上のコードは、Flickr のパブリックフォトストリームから画像を取得し、それらの画像のリストに C1ListBox を連結します。
-
MainPage クラスの直後に次のコードを追加します。
Visual Basic コードの書き方
Visual Basic コードのコピーPublic Class Photo
Public Property Title() As String
Get
Return m_Title
End Get
Set(value As String)
m_Title = Value
End Set
End Property
Private m_Title As String
Public Property Thumbnail() As String
Get
Return m_Thumbnail
End Get
Set(value As String)
m_Thumbnail = Value
End Set
End Property
Private m_Thumbnail As String
Public Property Content() As String
Get
Return m_Content
End Get
Set(value As String)
m_Content = Value
End Set
End Property
Private m_Content As String
End Class
C# コードの書き方
C# コードのコピーpublic class Photo
{
public string Title { get; set; }
public string Thumbnail { get; set; }
public string Content { get; set; }
}
ここまでの成果
これで、C1TileListBox にデータを追加できました。次の「手順3：ListBox アプリケーションの実行」では、ListBox for UWP の機能について説明します。